<template>
	<view>
		<page-head :title="'讲解'" :headtype="2"></page-head>
		<view class="exitem" v-for="(item,index) in datas" :key="index">
			<view class="exname marginAuto">{{ item.title }}</view>
			<view class="exkelist marginAuto" v-for="(items,indexs) in item.node_list" :key="indexs">
				<view class="exkeitem marginAuto">
					<view class="exkeitemhead flex" @click="showkefun(items,indexs)">
						<view class="exkeitemtitle ellipsis01">{{ items.title }}</view>
						<uv-icon style="margin-top:5rpx;" name="arrow-down" color="#666666" size="20"></uv-icon>
					</view>
					<view class="exkeitemlist" :class="items.itemsshow ? 'showkeblock':''">
						<view class="explainitem flex marginAuto"
						v-for="(item3,index3) in items.course_list" :key="index"
						@click="videobfun(item3,index3)">
							<view class="explainitemimg">
								<image :src="apifun.URLimg+item3.img" mode=""></image>
							</view>
							<view class="explainitemmsg">
								<view class="explainitemmsg-name ellipsis01">{{ item3.title }}</view>
								<view class="explainitemmsg-time">{{ item3.time }}</view>
								<view class="explainitemmsg-status" style="background: #FFEDED;color:#FC2A2A;" v-if="item3.is_study">已学习</view>
								<view class="explainitemmsg-status" style="background:#DBEBFF;color:#0089FB;" v-if="!item3.is_study">未学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				datas:[]
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				this.apifun.unirequest('/api/topic/getVideoList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			videobfun(item,index){
				uni.setStorageSync('videourl',item.video);
				setTimeout(()=>{
					if(item.video){
						this.apifun.navigate('/pages/driving/videob','courseid='+item.id)
					}
				},300)
			},
			showkefun(items,indexs){
				if(items.itemsshow){
					items.itemsshow = false
				}else{
					this.$set(items,'itemsshow',true)
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.exitem{
		.exname{
			width: 690rpx;
			font-size: 34rpx;
			color: #222222;
			padding: 20rpx 0;
			font-weight: 600;
		}
		.exkelist{
			.exkeitem{
				background:#fff;
				width:650rpx;
				padding:20rpx;
				margin-top: 20rpx;
				.exkeitemhead{
					width:100%;
					height:60rpx;
					border-radius:20rpx;
					justify-content: space-between;
					.exkeitemtitle{
						width: 90%;
						height:60rpx;
						line-height: 60rpx;
						color: #666666;
						font-size: 30rpx;
					}
				}
				.exkeitemlist{
					height: 0;
					overflow:hidden;
					transition:height 1s;
					.explainitem{
						width:96%;
						padding:10rpx 2%;
						background: #fff;
						margin-bottom: 20rpx;
						border-bottom: 1px solid #F3F3F3;
						.explainitemimg{
							width: 230rpx;
							height: 180rpx;
							image{
								width: 230rpx;
								height: 180rpx;
								border-radius: 10rpx;
							}
						}
						.explainitemmsg{
							width: 70%;
							margin-left: 18rpx;
							.explainitemmsg-name{
								color: #222222;
								font-size: 28rpx;
								margin-top: 10rpx;
							}
							.explainitemmsg-time{
								font-size: 24rpx;
								color: #666666;
								padding: 18rpx 0;
							}
							.explainitemmsg-status{
								display: inline-block;
								padding: 10rpx;
								border-radius: 10rpx;
								font-size:24rpx;
							}
						}
					}
				}
				.showkeblock{
					height:auto;
				}
			}
		}
	}
</style>